<template>
	<view class="page-body">
        <view class="logo">
			<view class="img">
				<image  src=""></image>
			</view>
		</view>
		<view class="form ">
			<view class="code">
				<view class="flex0 input-left">手机号</view>
				<input placeholder="请输入手机号" v-model="phoneNumber" placeholder-style="color: #929292;" maxlength="11"  />
			</view>
			<view class="input-row password">
				<view class="flex0 input-left">密码</view>
				<input :type="inputType" placeholder="输入6~12位含字母数字" @input="bindpwd" placeholder-style="color:#929292" maxlength="12"  />
				<view @click.stop="showPwd" class="pwd-eyes">
					<img src="/static/img/icon/eyes.png" alt="" class="uni-icon-eye" v-if="inputType=='password'" >
					<img src="/static/img/icon/eyes_on.png" alt="" class="uni-icon-eye" v-else >
				</view>
			</view>
			<view class="username">
				<view class="flex0 input-left">图形验证</view>
				<view class="get-code get-imgcode"  @click.stop="refreshCode" :style="'background-image:url('+svgCode+')'"></view>
				<input placeholder="请输入图形验证码" v-model="imgcode" placeholder-style="color: #929292;"/>
			</view>
			<view class=" username ">
				<view class="flex0 input-left">验证码</view>
				<view class="get-code" :style="{'color':getCodeBtnColor}" @click.stop="getCode()">{{getCodeText}}</view>
				<input placeholder="请输入验证码" v-model="code" placeholder-style="color: #929292;"/>
			</view>
			<view class="code">
				<view class="flex0 input-left">邀请码</view>
				<input placeholder="邀请码" v-model="inviteCode" placeholder-style="color: #929292;" />
			</view>
			<view class="btn" @click="doReg">注 册</view>
			<view class="flex protocol"> <text @click="goLogin">已有账号，去登录>></text> </view>
		</view>
		
	</view>
</template>

<script>
	var that;
	import {isPoneAvailable,TimeStorage,trim} from '@/utils/utils.js';
	import {
	    mapState,
	    mapMutations
	} from 'vuex'	
	import md5 from "@/common/SDK/md5.min.js";
	export default {
		data() {
			return {
				phoneNumber:"",
				code:'',
				passwd:"",
				inputType:"password",
				getCodeText:'获取验证码',
				getCodeBtnColor:"#222",
				getCodeisWaiting:false,
				svgCode:"",
				imgcode:"",
				inviteCode:"",
				ctoken:"",
				Timer:"",
				isNextStep:false
			}
		},
		onLoad() {
			that = this;
			this.refreshCode()
		},
		methods: {
			...mapMutations(['login']),
			bindpwd(e){
				let value = e.detail.value;
				this.passwd = value;
				
			},
			getCode(){
				uni.hideKeyboard()
				if(this.getCodeisWaiting){
					return ;
				}
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))){ 
					uni.showToast({title: '请填写正确手机号码',icon:"none"});
					return false; 
				} 
				this.getCodeText = "发送中..."
				this.getCodeisWaiting = true;
				this.getCodeBtnColor = "rgba(0,0,0,0.5)"
				//
				this.sendCode()
			},
			sendCode(){
				//接口请求验证码
				this.$https.POST({
					url:'/public/checkImgCode',
					data:{
						mobile:that.phoneNumber,
						imgcode:that.imgcode
					},
					success(res){
						uni.showToast({
							title:"动态验证码"+res.message,
							icon:"none"
						})
						setTimeout(()=>{
							that.setTimer();
						},1000)
					},
					showfailsure(res){
						that.getCodeText = "重新获取"
						that.getCodeisWaiting = false;
						that.getCodeBtnColor = "#222";
						that.imgcode = ""
						that.refreshCode()
					}
				})
			},
			setTimer(){
				let holdTime = 60;
				this.getCodeText = "重新获取(60)"
				this.Timer = setInterval(()=>{
					if(holdTime<=0){
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#222";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer);
						return ;
					}
					this.getCodeText = "重新获取("+holdTime+")"
					holdTime--;
				},1000)
			},
			doReg(){
				uni.hideKeyboard();
				//验证手机号码
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))){ 
					uni.showToast({title: '请填写正确手机号码',icon:"none"});
					return false; 
				}
				if(this.passwd==""){
					this.$showToast('请设置密码')
					return false;
				}else{
					if(this.passwd.length<6||this.passwd.length>12){
						this.$showToast('请设置6~12位密码');
						return false;
					}else{
						var pwdreg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
						if(!pwdreg.test(this.passwd)){
							this.$showToast('请设置6~12位包含数组和字母的密码')
							return false;
						}
					}
				}
				if(this.imgcode==""){
					this.$showToast('请填写图形验证码')
					return false;
				}
				if(this.code==""){
					this.$showToast('请填写短信验证码')
					return false;
				}
				this.$https.POST({
					url:'/public/telLogin',
					data:{
						mobile:that.phoneNumber,
						pwd:that.passwd,
						imgcode:that.imgcode,
						smscode:that.code,
						verify:that.inviteCode
					},
					success(res){
						let data=res.data;
						data.usermobile = that.phoneNumber
						that.login(data)
						uni.showToast({
							title:res.message,
							icon:"none",
						})
						// data.isNewUser = true
						// if(data.isNewUser){
						// 	uni.$emit('register',data)
						// }
						uni.switchTab({
							url:"/pages/tabBar/home/home"
						})
					},
					showfailsure(){
						that.refreshCode()
					}
				})
			},
			refreshCode(){
				this.$https.POST({//获取验证码token
					url:'/public/ctoken',
					data:{
					},
					success(res){
						if(res.code==10000){
							let ctoken =that.ctoken  = res.ctoken;
							TimeStorage.Set('ctoken',ctoken,3600)
						}
					}
				}).then((res)=>{//请求验证码
					that.$https.POST({
						url:'/public/code',
						data:{},
						success(res){
							that.svgCode=`data:image/svg+xml;utf8,${encodeURIComponent(res.data)}`;
						}
					})
				})
			},
			showPwd(){
				if(this.inputType=="password"){
					this.inputType="text"
				}else{
					this.inputType="password"
				}
			},
			goLogin(){
				uni.redirectTo({
					url:"/pages/login/login"
				})
			}
		},
		onUnload() {
			that = null;
			
		}
	}
</script>

<style lang="scss">
	@import "../../static/css/login.scss";
	.get-imgcode{background: #ccc;width: 110upx;}
	.protocol{
		line-height: 60upx;
		justify-content:center;
		text{color: $color2;}
	}
	.form .btn{
		margin-top: 100upx;
	}
</style>
